<template>
  <div class="comment">
    <p @click="backward">《 返回</p>
    <h4>
      评论区 <span>{{ comment.total }}</span>
    </h4>
    <h4>热门评论</h4>
     <div class="hotComments" v-if="comment.hotComments.length==0">暂无热评，快去给你喜欢的评论点赞吧~</div>
    <div
      class="hotComments"
      v-for="item in comment.hotComments"
      :key="item.commentId"
    > 
   
      <Comment :item="item"></Comment>
    </div>
    <h4>全部评论</h4>
    <div class="hotComments" v-for="i in comment.comments" :key="i.commentId">
      <Comment :item="i"></Comment>
    </div>
    <Loading v-if="isLoading"></Loading>
    <div class="loadingmore" @click="loadMore">加载更多 ></div>
  </div>
</template>

<script>
import Loading from "@/components/Loading";
import Comment from "@/components/Comment";
export default {
  name: "Comments",
  data() {
    return {
      isLoading: true,
      // 歌单评论
      listId: null,
      page: 1,
      comment: {
        total: null,
        hotComments: [],
        comments: [],
      },
    };
  },
  methods: {

    // 返回上一页
    backward() {
      this.$router.go(-1);
    },
    // 加载更多
    loadMore() {
      this.page++;
      if (this.page >= 10) {
        return false;
      }
      this.isLoading = true;
      this.showComments();
    },

    // 评论
    showComments() {
      // console.log();
      // if()
      this.$http.get("/comment/playlist?id=" + this.listId).then((data) => {
        this.isLoading = false;
        // console.log(data);
        this.comment.total = data.data.total;
        this.comment.hotComments = data.data.hotComments;
        let c = data.data.comments.slice(
          (this.page - 1) * 10,
          this.page * 10
        );
        this.comment.comments=this.comment.comments.concat(c);
      });
    },
  },
  components: {
    Loading,
    Comment,
  },
  filters: {},
  created() {
    this.listId = this.$route.params.id;
    // console.log(this.$route.params)
    this.showComments();
  },
};
</script>

<style lang="less">
* {
  margin: 0px;
  padding: 0px;
}
.comment {
  p {
    margin: 5px 10px;
  }
  h4 {
    margin: 0px 15px;
    margin-top: 30px;
    margin-bottom: 20px;
    span {
      color: #979191;
    }
  }
  .hotComments {
    margin: 30px 15px;
  }
}
.loadingmore {
  // background-color: bisque;
  line-height: 20px;
  color: #7b7b7b;
  text-align: center;
}
</style>